import React from 'react';
import { Form, Select, Button, DatePicker } from 'antd';
import styles from './AdvancedFilter.less';

const { RangePicker } = DatePicker;
const { Option } = Select;

@Form.create()
class AdvancedFilter extends React.Component {

  componentDidMount() {
    const { getFormThis } = this.props;
    if (getFormThis) getFormThis(this, 'advancedFilter');
  }

  handleReset = () => {
    const { form } = this.props;
    form.resetFields();
  }

  handleSubmit = e => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, handleParamsChange } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const { datatime, processStatus = '' } = values;
      const param = { processStatus };
      if (datatime && datatime.length > 0) {
        param.timeStart = datatime[0].format('YYYY-MM-DD HH:mm:ss');
        param.timeEnd = datatime[1].format('YYYY-MM-DD HH:mm:ss');
      } else {
        param.timeStart = "";
        param.timeEnd = "";
      }
      if (handleParamsChange) handleParamsChange(param);
    });
  }

  handleSearch = () => {
    const { onSearch } = this.props;
    if (onSearch instanceof Function) onSearch();
  }

  render() {
    const { form, visible, selectedKeys = [] } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`filter__box ${!visible ? 'box__hidden' : ''}`}>
        <Form className={styles.cus_box}>
          <div className='filter_form_box'>
            <Form.Item
              label="申请时间"
            >
              {getFieldDecorator('datatime', {
                initialValue: '',
              })(
                <RangePicker
                  format='YYYY-MM-DD HH:mm:ss'
                  className='input__search'
                  onChange={this.onRangeChange}
                  placeholder={['开始时间', '结束时间']}
                  showTime
                />
              )}
            </Form.Item>
            { selectedKeys.some(k => (k === 'todo')) ? null : 
              (
                <Form.Item
                  label="状态"
                >
                  {getFieldDecorator('processStatus', {
                  })(
                    // executing:执行中,completed:已完成
                    <Select className='input__search' placeholder='请选择'>
                      <Option value='executing'>执行中</Option>
                      <Option value='completed'>已完成</Option>
                    </Select>
                  )}
                </Form.Item>
              )
            }
            <div className='filter_buttons'>
              <Button type="primary" size='small' onClick={this.handleSearch}>查询</Button>
              <Button size='small' onClick={this.handleReset}>重置</Button>
            </div>
          </div>
        </Form>
      </div>
    );
  }
}
export default AdvancedFilter;